<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="description" content="Examples of billboard.js. billboard.js is a re-usable easy interface JavaScript chart library, based on D3 v4+.">
    <meta name="author" content="NAVER Corp.">
    <title>billboard.js - examples</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fallback/1.1.9/fallback.min.js"></script>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Bootstrap Core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


    <!-- Custom CSS -->
    <link href="./simple-sidebar.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css" />
    <link rel="stylesheet" type="text/css" href="./tomorrow.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/languages/javascript.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>

    <script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js"></script>
    <script>
        var path = ["../dist/", "../../gh-pages/release/latest/dist/"];
        // var path = ["https://naver.github.io/billboard.js/release/3.9.0/dist/"];

        !function() {
            var cssFileName = localStorage.cssThemeName;

            cssFileName = cssFileName ? "theme/" + cssFileName : "billboard";

            /Edge/.test(navigator.userAgent) && /github.io/.test(location.hostname) && path.reverse();

            fallback.load({
                    billboard_js: path.map(function(p) {
                        return p + "billboard.js"
                    }),
                    billboard_css: path.map(function(p) {
                        return p + cssFileName + ".css"
                    }),
                    // plugins_stanford: path.map(function(p) {
                    //     return p + "plugin/billboardjs-plugin-stanford.js"
                    // })
            });

	        $(function() {
		        var $select = $("#theme select");

		        $select.on("change", function() {
			        var value = this[this.options.selectedIndex].value;

			        if (value !== localStorage.cssThemeName) {
				        localStorage.cssThemeName = value;
				        location.reload();
			        }
		        });

                // add 'dark' classname to body when dark theme is selected
                document.body.classList[cssFileName.indexOf("dark") > -1 ? "add" : "remove"]("dark");

		        $select.children().toArray()
			        .forEach(function(v) {
				        v.selected = cssFileName.indexOf(v.value) > -1;
			        });
	        });
        }();
    </script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <h2 class="sidebar-brand">billboard.js</h2>
        <p class="link">
            <a href="https://naver.github.io/billboard.js/release/latest/doc/" target="_new">API Docs</a> |
            <a href="https://github.com/naver/billboard.js" class="github" target="_new">GitHub</a>
        </p>
        <form id="theme">
            Theme: <select class="classic">
                <option value="">default</option>
                <option value="datalab">datalab</option>
                <option value="dark">dark</option>
                <option value="insight">insight</option>
                <option value="graph">graph</option>
                <option value="modern">modern</option>
            </select>
        </form>
        <p id="launch" title="To open as new window, hold the 'Alt(Win)/option(Mac)' key while clicking.">
            Launch code editor <button class="js">JS</button> <button class="ts">TS</button>
        </p>

        <ul class="sidebar-nav"></ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle" style="background-color:#ff4242;color:#fff">Menu</a>

                    <div class="example-grid">
                        <div>
                            <div>
                                <h2 id="title"></h2>
                                <p id="description"></p>
                            </div>
                            <div class="chart_area">
                                <h1>billboard.js examples</h1>
                                <p>
                                    Discover all <span class="item_count"></span> examples!
                                    <!-- by navigating <span class="by_text"></span>. -->
                                </p>

                                <h4>Supported chart types</h4>
                                <ul >
                                    <li><a href="#Chart.AreaChart">Area</a></li>
                                    <li><a href="#Chart.AreaRangeChart">Area Range</a></li>
                                    <li><a href="#Chart.BarChart">Bar</a></li>
                                    <li><a href="#Chart.BubbleChart">Bubble</a></li>
                                    <li><a href="#Chart.CandlestickChart">Candlestick</a></li>
                                    <li><a href="#Chart.CombinationChart">Combination</a></li>
                                    <li><a href="#Chart.DonutChart">Donut</a></li>
                                    <li><a href="#Chart.FunnelChart">Funnel</a></li>
                                    <li><a href="#Chart.GaugeChart">Gauge</a></li>
                                    <li><a href="#Chart.LineChart">Line</a></li>
                                    <li><a href="#Chart.PieChart">Pie</a></li>
                                    <li><a href="#Chart.PolarChart">Polar</a></li>
                                    <li><a href="#Chart.RadarChart">Radar</a></li>
                                    <li><a href="#Chart.ScatterPlot">Scatter</a></li>
                                    <li><a href="#Chart.SplineChart">Spline</a></li>
                                    <li><a href="#Chart.StackedBarChart">Stacked Bar</a></li>
                                    <li><a href="#Chart.StepChart">Step</a></li>
                                    <li><a href="#Chart.TreemapChart">Treemap</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="code">
                            <h4 class="sub_tit">Sample code</h4>
                            <pre><code class="html"></code></pre>
                            <p>
                                &bull; Try it out by editing below code or click right sided buttons.<br>
                                &nbsp; <sup>*</sup>for ESM imports usage example, checkout <a href="https://github.com/naver/billboard.js/wiki/CHANGELOG-v2#modularization-by-its-functionality" target="_new" style="text-decoration:underline;">this link</a>.
                            </p>
                            <div class="js">
                                <button class="button clipboard">Copy to Clipboard</button>

                                <div class="editor" title="To open as new window, hold the 'Alt(Win)/option(Mac)' key while clicking.">
                                    <button class="button js">JS</button>
                                    <button class="button ts">TS</button>
                                </div>
                                <pre><code class="javascript" contenteditable="true" spellcheck="false"></code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

<script src="./demo.js"></script>
<script src="./chart.js"></script>
<script>
fallback.ready(function(e) {
    // load plugin
    fallback.load({
        plugins_stanford: path.map(function(p) {
            return p + "plugin/billboardjs-plugin-stanford.js"
        }),
        plugins_textoverlap: path.map(function(p) {
            return p + "plugin/billboardjs-plugin-textoverlap.js"
        }),
        plugins_bubblecompare: path.map(function(p) {
            return p + "plugin/billboardjs-plugin-bubblecompare.js"
        }),
        plugins_tableview: path.map(function(p) {
            return p + "plugin/billboardjs-plugin-tableview.js"
        }),
        plugins_sparkline: path.map(function(p) {
            return p + "plugin/billboardjs-plugin-sparkline.js"
        })
    });

    fallback.ready(function() {
        billboardDemo.init();
    });
});

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-100680234-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
